<template>
  <a-drawer :width="900" :visible="_isOpen" @cancel="_isOpen = false" unmountOnClose>
    <template #title>
      <i class="icon"></i>
      <p class="title">设置分期收款计划 <span>（设置后立即生效，对已结单的不影响，请根据业务需求设置）</span></p>
    </template>
    <div class="content">
      <div class="info">
        <div class="user-info">
          <div>
            <p>对账人姓名电话</p>
            <a-input-group>
              <a-input v-model="form.name1" :style="{ width: '50%' }" placeholder="姓名" />
              <a-input v-model="form.tel1" :style="{ width: '50%' }" placeholder="电话" />
            </a-input-group>
          </div>
          <div>
            <p>开发人员姓名电话</p>
            <a-input-group style="width: 100%">
              <a-input v-model="form.name2" :style="{ width: '50%' }" placeholder="姓名" />
              <a-input v-model="form.tel2" :style="{ width: '50%' }" placeholder="电话" />
            </a-input-group>
          </div>
        </div>
        <div class="remark">
          <p>备注</p>
          <a-textarea v-model="form.remark" placeholder="可以在此备注说明，以免遗漏相关关键信息" allow-clear />
        </div>
      </div>

      <h1 class="title">收款关联节点</h1>

      <div class="list">
        <div class="list-item" v-for="(item, index) in list" :key="index">
          <header>
            <p>{{ item.name }}</p>
          </header>
          <div class="options-warp">
            <div>
              <p class="label"><i style="color: #f53f3f">*</i><span>收款类型</span></p>
              <a-select v-model="item.type" :style="{ width: '100%' }" placeholder="请选择">
                <a-option v-for="(item, index) in typeList" :key="index" :value="item.value">{{ item.label }}</a-option>
              </a-select>
            </div>
            <div>
              <p class="label">转款时间</p>
              <a-input v-model="item.time" :style="{ width: '100%' }" placeholder="请输入" allow-clear type="number">
                <template #suffix>天</template>
              </a-input>
            </div>
            <div>
              <p class="label">收款比例</p>
              <a-input v-model="item.rate" :style="{ width: '100%' }" placeholder="请输入" allow-clear type="number">
                <template #suffix>%</template>
              </a-input>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <a-button @click="_isOpen = false">取消</a-button>
      <a-button type="primary" @click="save">保存</a-button>
    </template>
  </a-drawer>
</template>

<script setup>
import { ref, computed, watch, onMounted, nextTick } from "vue";

const form = ref({});
const list = ref([
  { name: "接采购单付款", type: null, time: null, rate: null },
  { name: "生产完成确认", type: null, time: null, rate: null },
  { name: "发货完成", type: null, time: null, rate: null },
  { name: "入库完成", type: null, time: null, rate: null },
  { name: "配送完成确认", type: null, time: null, rate: null },
  { name: "安装完成确认", type: null, time: null, rate: null }
]);
const typeList = ref([
  { label: "1期款项", value: 1 },
  { label: "2期款项", value: 2 },
  { label: "3期款项", value: 3 },
  { label: "4期款项", value: 4 },
  { label: "5期款项", value: 5 },
  { label: "6期款项", value: 6 }
]);
const emit = defineEmits(["update:isOpen", "submitOk"]);
const props = defineProps({
  isOpen: {
    type: Boolean,
    default: false
  },
  optionInfo: {
    type: Object,
    default: () => {
      return {
        type: "add", //add edit view
        detail: []
      };
    }
  }
});
const _isOpen = computed({
  get() {
    return props.isOpen;
  },
  set(value) {
    emit("update:isOpen", value);
  }
});

const save = () => {
  emit("submitOk");
};
</script>

<style lang="scss" scoped>
:deep(.arco-input-group) {
  & > .arco-input-wrapper:not(:last-child) {
    --color-neutral-3: white;
  }
}
:deep(.arco-input-wrapper.arco-input-focus) {
  --color-bg-2: #f2f3f5;
}
:deep(.arco-input-wrapper) {
  &:hover {
    background-color: #f2f3f5;
    border-color: transparent;
  }
}
.content {
  .info {
    .user-info {
      display: grid;
      gap: 130px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      & > div > p {
        margin: 20px 0 10px 0;
        color: #4e5969;
      }
    }
    .remark {
      & > p {
        margin: 20px 0 10px 0;
        color: #4e5969;
      }
    }
  }

  h1.title {
    width: 100%;
    font-size: 18px;
    color: #3d3d3d;
    border-bottom: 1px solid #dcdfe6;
    margin: 32px -16px 0 -16px;
    padding: 0 16px;
    padding-bottom: 14px;
    font-weight: normal;
  }
  .list {
    .list-item {
      border: 1px solid #f0f0f0;
      margin-top: 20px;
      header {
        line-height: 40px;
        background-color: #f0f0f0;
        padding: 0 20px;
      }
      .options-warp {
        display: grid;
        gap: 32px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 14px 20px;
        & > div {
          display: grid;
          grid-template-columns: 80px 1fr;
          p.label {
            text-align: right;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            color: #4E5969;
            i {
              font-style: normal;
              display: inline-block;
              padding: 4px 4px 0 0;
            }
          }
        }
      }
    }
  }
}
.title {
  display: inline-block;
  color: #131414;
  font-size: 18px;
  span {
    color: #86909c;
    font-size: 14px;
  }
}
.icon {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #409eff;
  margin: 0 10px 4px 0;
}
</style>
